<template>
  <div>
    <el-card
      ><el-table border style="margin: 10px 0px" :data="skuList">
        <el-table-column
          label="序号"
          type="index"
          :align="'center'"
          width="80px"
        />
        <el-table-column
          label="名称"
          show-overflow-tooltip
          :align="'center'"
          width="500px"
        >
          <template #="{ row }">
            <pre>{{ row.name }}</pre>
          </template></el-table-column
        >
        <el-table-column
          label="描述"
          :align="'center'"
          show-overflow-tooltip
          width="700px"
          property="description"
        ></el-table-column>
        <el-table-column label="图片" :align="'center'" width="300px">
          <template #="{ row }">
            <div
              style="
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <div
                style="
                  max-width: 100px;
                  max-height: 100px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <img
                  :src="row.imageUrl"
                  alt=""
                  style="height: 100%; width: 100%"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="重量" :align="'center'" width="150px">
          <template #="{ row }">
            <pre>{{ row.weight }}</pre>
          </template></el-table-column
        >
        <el-table-column label="价格" :align="'center'" width="150px">
          <template #="{ row }">
            <pre>{{ row.price }}</pre>
          </template></el-table-column
        >
        <el-table-column
          label="操作"
          :align="'center'"
          width="250px"
          fixed="right"
          ><template #="{ row, $index }">
            <el-button
              type="primary"
              size="small"
              :icon="row.saleStatus === 1 ? 'Top' : 'Bottom'"
              @click="toggleSaleStatus(row)"
            ></el-button>
            <el-button type="primary" size="small" icon="Edit"></el-button>
            <el-button
              type="primary"
              size="small"
              icon="InfoFilled"
              @click="showDetail(row)"
            ></el-button>
            <el-button
              type="primary"
              size="small"
              icon="Delete"
            ></el-button> </template
        ></el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="limit"
        :page-sizes="[10, 20, 50]"
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- direction 抽屉的打开方向 -->
    <el-drawer v-model="drawer" direction="rtl">
      <template #header>
        <h4>{{ detailRow?.name }}详情</h4>
      </template>
      <template #default>
        <div>
          <el-row>
            <el-col :span="4">
              <div>
                <span>名称</span>
              </div>
            </el-col>
            <el-col :span="20">
              <div>
                <span>{{ detailRow?.name }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <div>
                <span>重量</span>
              </div>
            </el-col>
            <el-col :span="20">
              <div>
                <span>{{ detailRow?.weight }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <div>
                <span>图片</span>
              </div>
            </el-col>
            <el-col :span="20">
              <div>
                <el-carousel :interval="4000" type="card" height="200px">
                  <el-carousel-item v-for="item in 6" :key="item">
                    <h3 text="2xl" justify="center">{{ item }}</h3>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </el-col>
          </el-row>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">cancel</el-button>
          <el-button type="primary" @click="confirmClick">confirm</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { reqSkuPage } from '@/api/product/sku/index'
import type { SkuData } from '@/api/product/spu/type'
import { ElMessageBox } from 'element-plus'

let pageNo = ref<number>(1)
let limit = ref<number>(10)
let total = ref<number>(0)

const skuList = ref<SkuData[]>([])

async function refreshTable(pageNoParam = 1) {
  let { data } = await reqSkuPage(pageNoParam, limit.value)
  pageNo.value = data.pageNo
  limit.value = data.pageSize
  total.value = data.total
  skuList.value = data.list
}
onMounted(() => {
  refreshTable()
})
function handleCurrentChange(pageNoParam: number) {
  refreshTable(pageNoParam)
}
function handleSizeChange(limit: number) {
  refreshTable(pageNo.value)
}
// 变更商品上架、下架状态
const toggleSaleStatus = (row: SkuData) => {
  if (row.saleStatus === 1) {
    row.saleStatus = 0
  } else {
    row.saleStatus = 1
  }
}
// 商品详情显隐
const drawer = ref(false)
const detailRow = ref<SkuData>()
const showDetail = (row: SkuData) => {
  drawer.value = true
  detailRow.value = row
}
function cancelClick() {
  drawer.value = false
}
function confirmClick() {
  ElMessageBox.confirm('确定关闭这个抽屉页面吗？')
    .then(() => {
      drawer.value = false
    })
    .catch(() => {
      // catch error
    })
}
</script>
<script lang="ts">
export default {
  name: 'SkuManage',
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
